<!-- 用户管理 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="data.name" size="medium" class="iup_width200" :placeholder="$t('lan.enterUserName')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.mobile" size="medium" class="iup_width200" :placeholder="$t('lan.pleaseMobile')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.idCard" class="iup_width200" size="medium" :placeholder="$t('lan.pleaseCard')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="data.roleName" size="medium" class="iup_width200" :placeholder="$t('lan.selectRole')">
          <el-option v-for="item in roleNameList" :key="item.code" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">{{$t('lan.query')}}</el-button>
        <el-button type="info" size="medium" @click="reset">{{$t('lan.reset')}}</el-button>
        <el-button type="primary" size="medium" @click="add('create','')">{{$t('lan.add')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="getList" v-loading="loading" :element-loading-text="$t('lan.dataLoading')" empty-text border stripe>
      <div slot="empty">
        <div v-if="loading"></div>
        <div v-else>{{$t('lan.available')}}</div>
      </div>
      <el-table-column type="index" :label="$t('lan.num')" align="center" width="140"></el-table-column>
      <el-table-column prop="name" :label="$t('lan.name')" align="center" width="150"></el-table-column>
      <el-table-column prop="mobile" :label="$t('lan.phone')" align="center" width="140"></el-table-column>
      <el-table-column prop="roleName" :label="$t('lan.roleName')" align="center" width="130"></el-table-column>
      <el-table-column prop="idCard" :label="$t('lan.IdNumber')" align="center" width="180"></el-table-column>
      <el-table-column prop="addTime" :label="$t('lan.createTime')" :formatter="common.formatTime" align="center" width="170"></el-table-column>
      <el-table-column prop="status" :label="$t('lan.status')" align="center" width="120">
        <template slot-scope="scope">
          <span :class="{green:scope.row.status=='1',red:scope.row.status=='2'}">{{scope.row.status==2?$t('lan.disable'):$t('lan.enable')}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lan.operation')" min-width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="add('edit',scope.row)">{{$t('lan.modify')}}</el-button>
          <el-button type="danger" size="small" @click="del(scope.row)">{{$t('lan.del')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>
    <!-- 分页结束 -->

    <!-- 用户管理新增、修改 -->
    <userListModal v-if="userData.showModal" :userData="userData" @closeModal="getUserList"></userListModal>
  </div>
</template>
<script>
import userListModal from 'component/permissions/userListModal'
export default {
  components: { userListModal },
  data () {
    return {
      getList: [],
      data: {
        pageSize: 10,
        currentPage: 1,
        name: '', // 用户名
        mobile: '', // 手机号码
        idCard: '', // 身份证
        roleName: '', // 用户角色
      },
      total: 0,
      loading: false,
      userData: {},
      roleNameList: [] // 用户角色列表
    }
  },
  methods: {
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page
      this.getUserList();//获取用户列表
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val
      this.getUserList();//获取用户列表
    },
    //查询关键字
    search () {
      this.data.currentPage = 1
      this.getUserList();//获取用户列表
    },
    //重置列表
    reset () {
      Object.assign(this.$data.data, this.$options.data().data)//重置列表
      this.getUserList();//获取用户列表
    },
    //获取用户列表
    async getUserList () {
      this.loading = true
      let url = '/user/queryPage'
      let result = await this.request.httpRequest('POST', url, this.data)
      if (result.code == 200) {
        this.total = result.data.totalRows
        this.data.pageSize = result.data.pageSize
        this.data.currentPage = result.data.currentPage
        this.getList = result.data.datas
        this.loading = false
      } else {
        this.loading = false
        this.$message({ type: 'error', message: result.msg })
      }
    },
    //删除用户列表
    del (row) {
      this.$confirm(this.$t('lan.delUser'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: 'warning'
      }).then(async () => {
        this.loading = true
        let url = `/user/delete/${row.id}`
        let result = await this.request.httpRequest('DELETE', url)
        if (result.code == 200) {
          this.$message({ type: 'success', message: result.msg });
          this.getUserList();
        } else {
          this.loading = false
          this.$message({ type: 'error', message: result.msg })
        }
      })
    },
    //新增、修改用户管理
    add (type, row) {
      this.userData = {
        title: type == 'create' ? this.$t('lan.newUser') : this.$t('lan.modifyUser'),
        showModal: true,
        userId: row.id || '',
        type: type
      }
    },
    //获取用户角色
    async getterm () {
      let url = '/role/queryList'
      let result = await this.request.httpRequest('POST', url, {})
      if (result.code == 200) {
        this.roleNameList = result.data
      } else {
        this.$message({ type: 'error', message: result.msg })
      }
    },

  },
  mounted () {
    this.getterm();
    this.getUserList();
    this.getTime = this.helper.debounce(this.getUserList)//防抖
  },
  created () {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        this.search();
      }
    };
  }
}
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>